<template>
	<view class="result-container">
		<view class="daily-img" v-if="isLoading">
			<u-popup class="coupon-popup pore" v-if="isLoading" :show="isLoading" mode="center"
				:customStyle="{'width':'354px','position':'relative'}" round="20" bgColor="transparent">
				<view class="coupon-wrap">
					<image class="loading-img" src="https://hxs.dsjhs.com:553/prod-api/profile/wuxing-loading.png"
						mode="" style="width: 162px;height: 162px;"></image>
					<view class="loading-tip">
						给我十秒，我来掐指算算...
					</view>
				</view>
				
			</u-popup>
		</view>
		<x-skeleton type="text" :loading="loading" :configs="listConfigs">
			<view class="result-content">
				<view class="result-card">
					<view class="result-head">
						<view class="username">
							{{ detail.detail_info.sizhu_info.day.tg }}{{ detail.detail_info.sizhu_info.day.dz }}日生的
							{{ detail.base_info.name }} 是
						</view>
						<view class="result-title">
							{{ getTwelveVal() + '格' }}·{{ mingge }}
						</view>
					</view>
					<view class="result-desc">
						{{ detail.detail_info.sizhu_info.sizhu_indication.mingyun.sanshishu_mingyun }}
						
						<view class="resolve-btn"
							@click="handleResolve(mingyun, detail.detail_info.sizhu_info.sizhu_indication.mingyun.sanshishu_mingyun)">
							免费解读
						</view>
					</view>
					
					<view class="result-info">
						<view class="result-info-wrap">
							<view class="common-head">
								<view class="common-icon shenqiang"></view>
								<view class="common-title">身{{ detail.base_info.xiyongshen.qiangruo[3] }}型</view>
							</view>
							<view class="info-item">
								<text class="label">八字</text>
								<view class="bazi">
									<text
										class="value">【{{ detail.detail_info.sizhu_info.year.tg }}{{ detail.detail_info.sizhu_info.year.dz }}】【{{ detail.detail_info.sizhu_info.month.tg }}{{ detail.detail_info.sizhu_info.month.dz }}】</text>
									<text
										class="value">【{{ detail.detail_info.sizhu_info.day.tg }}{{ detail.detail_info.sizhu_info.day.dz }}】【{{ detail.detail_info.sizhu_info.hour.tg }}{{ detail.detail_info.sizhu_info.hour.dz }}】</text>
								</view>

							</view>
							<view class="info-item">
								<text class="label">天干</text>
								<text class="value">【{{ detail.base_info.xiyongshen.rizhu_tiangan }}】</text>
							</view>
							<view class="info-item">
								<text class="label">喜用神</text>
								<text class="value">【{{ detail.base_info.xiyongshen.xiyongshen }}】</text>
							</view>
							<!-- <view class="info-item">
								<text class="label">五行</text>
								<text class="value">【{{ detail.base_info.xiyongshen.yinyang }}】</text>
							</view> -->
						</view>
						<view class="result-img-wrap">
							<view class="result-img">
								<image class="wx-img" src="https://hxs.dsjhs.com:553/prod-api/profile/wuxingxinxi.png"
									mode=""></image>
								<text
									class="count huo">{{ detail.base_info.xiyongshen.huo_score_percent | toFixed1 }}%</text>
								<text
									class="count tu">{{ detail.base_info.xiyongshen.tu_score_percent | toFixed1 }}%</text>
								<text
									class="count jin">{{ detail.base_info.xiyongshen.jin_score_percent | toFixed1 }}%</text>
								<text
									class="count shui">{{ detail.base_info.xiyongshen.shui_score_percent | toFixed1 }}%</text>
								<text
									class="count mu">{{ detail.base_info.xiyongshen.mu_score_percent | toFixed1 }}%</text>
							</view>
						</view>
					</view>
				</view>

				<view class="card-item">
					<view class="common-head">
						<view class="common-icon rizhu"></view>
						<view class="common-title">日柱论命</view>
					</view>
					<view class="card-content">{{ detail.detail_info.sizhu_info.sizhu_indication.xingge.rizhu }}</view>
					<view class="resolve-btn"
						@click="handleResolve('日柱论命', detail.detail_info.sizhu_info.sizhu_indication.xingge.rizhu)">
						免费解读
					</view>
				</view>

				<view class="card-item">
					<view class="common-head">
						<view class="common-icon caiyun"></view>
						<view class="common-title">财运分析</view>
					</view>
					<view class="card-content">
						{{ detail.detail_info.sizhu_info.sizhu_indication.caiyun.sanshishu_caiyun.simple_desc + '。' }}{{ detail.detail_info.sizhu_info.sizhu_indication.caiyun.sanshishu_caiyun.detail_desc }}
					</view>
					<view class="resolve-btn"
						@click="handleResolve('财运分析', detail.detail_info.sizhu_info.sizhu_indication.caiyun.sanshishu_caiyun.simple_desc + '。' + detail.detail_info.sizhu_info.sizhu_indication.caiyun.sanshishu_caiyun.detail_desc)">
						免费解读
					</view>
				</view>

				<view class="card-item">
					<view class="common-head">
						<view class="common-icon yinyuan"></view>
						<view class="common-title">姻缘分析</view>
					</view>
					<view class="card-content">
						{{ detail.detail_info.sizhu_info.sizhu_indication.yinyuan.sanshishu_yinyuan }}
					</view>
					<view class="resolve-btn"
						@click="handleResolve('姻缘分析', detail.detail_info.sizhu_info.sizhu_indication.yinyuan.sanshishu_yinyuan)">
						免费解读
					</view>
				</view>

				<view class="card-item">
					<view class="common-head">
						<view class="common-icon yuncheng"></view>
						<view class="common-title">运程分析</view>
					</view>
					<view class="card-content">{{ detail.detail_info.sizhu_info.sizhu_indication.chenggu.description }}
					</view>
					<view class="resolve-btn"
						@click="handleResolve('运程分析', detail.detail_info.sizhu_info.sizhu_indication.chenggu.description)">
						免费解读
					</view>
				</view>

			</view>

			<view class="result-footer">
				<view class="result-btns">
					<button class="card-btn" @tap="handleMakeCard">生成报告卡片</button>
					<button class="share-btn" open-type="share">邀请好友测试</button>
				</view>
				<view class="footer-tip">
					推算理论源于八字命理，仅供国学探究，娱乐使用！
				</view>
			</view>
		</x-skeleton>

		<!-- 免费解读 -->
		<resolvelayer :resolveContent="resolveContent"></resolvelayer>
	</view>
</template>

<script>
	import resolvelayer from './resolvelayer.vue'
	
	import {
		jingsuan,
		aiResolve,
		recordDetail
	} from '@/common/api_dailyinquiry.js'

	import mixin from './mixin.js'

	// 判定1
	const rizhutianganArr1 = ['甲', '乙', '丙', '丁', '庚', '辛', '壬', '癸'] // 日柱天干
	const yuezhudizhiArr1 = ['寅', '卯', '巳', '午', '申', '酉', '亥', '子'] // 月柱地支

	// 判定2
	const rizhutianganArr2 = ['乙', '丁', '辛', '癸'] // 日柱天干
	const yuezhudizhiArr2 = ['寅', '巳', '申', '亥'] // 月柱地支

	export default {
		data() {
			return {
				loading: true,
				isLoading: true,
				detail: {},
				listConfigs: {
					gridRows: 5,
				},
				// resolveTitle: '',
				// resContent: '',
				resolveContent: {}
			}
		},
		components: {
			resolvelayer
		},
		mixins: [mixin],
		onLoad(option) {
			console.log(option, 'option')
			if (option.id) {
				this.getRecordDetail(option.id)
			} else {
				const userForm = JSON.parse(decodeURIComponent(option.params))
				this.getDetailData(userForm)
			}

		},
		filters: {
			toFixed1(val) {
				var num = val.split('%')[0]
				if (num == 0) {
					return num
				} else {
					return Number(num).toFixed(1)
				}

			}
		},
		onShareAppMessage(res) {
			return {
				title: '国学八字，探究命格',
				path: 'subpage/twelvepattern/index',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},

		methods: {
			async getDetailData(userForm) {
				const res = await jingsuan(userForm)
				if (res.code === 200) {
					// setTimeout(() => {
					// 	this.detail = res.data.data
					// 	this.isLoading = false
					// }, 1500)
					this.detail = res.data.data
					this.isLoading = false
				}
				this.loading = false
			},
			async getRecordDetail(id) {
				const res = await recordDetail(id)
				if (res.code === 200) {
					// setTimeout(() => {
					// 	this.detail = res.data.json.data
					// 	this.isLoading = false
					// }, 1500)
					this.detail = res.data.json.data
					this.isLoading = false
				}
				this.loading = false
			},
			handleMakeCard() {
				const formData = JSON.stringify(this.detail)
				uni.navigateTo({
					url: `/subpage/twelvepattern/card?formData=${encodeURIComponent(formData)}`
				})
			},
			// 免费解读
			async handleResolve(title, question) {
				this.isLoading = true
				const res = await aiResolve({
					question
				})
				if (res.code === 200) {
					this.resolveContent.title = title
					this.resolveContent.content = res.msg

					this.showDialog = true
					this.isLoading = false
				} else {
					uni.showToast({
						title: '网络异常，请稍后再试',
						icon: 'none'
					})
					this.isLoading = false
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.result-container {
		width: 100%;
		min-height: 100vh;
		background: #FAF5FF;

		.coupon-wrap {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 442rpx;
			height: 462rpx;
			margin: 0 auto;
			// padding: 52rpx 0 28rpx;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/jgtc.png') no-repeat center center;
			background-size: 100% 100%;
			box-sizing: border-box;

		}

		.loading-img {
			position: relative;
			width: 162px;
			height: 162px;
			animation: rotate 3s linear infinite;
			z-index: 9999;
		}

		.loading-tip {
			// position: absolute;
			// bottom: 45px;
			// left: 50%;
			// transform: translateX(-50%);
			margin-top: 30rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #A694EA;
		}

		.result-content {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			.result-card {
				width: 100%;
				background: #FFFFFF;
				border-radius: 40rpx;
				box-sizing: border-box;

				.result-head {
					width: 100%;
					height: 194rpx;
					// margin-bottom: 56rpx;
					padding: 48rpx 0 0 40rpx;
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/juxingtou.png') no-repeat center;
					background-size: 100% 100%;
					box-sizing: border-box;

					.username {
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						line-height: 20px;
						text-align: left;
						margin-bottom: 20rpx;
					}

					.result-title {

						font-weight: 600;
						font-size: 56rpx;
						color: #34314F;
						line-height: 68rpx;
						text-align: left;
					}


				}

				.result-desc {
					max-width: 318px;
					margin-bottom: 56rpx;
					padding-left: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #34314F;
					line-height: 50rpx;
					text-align: left;
					box-sizing: border-box;
				}

				.result-info {
					display: flex;
					flex-wrap: nowrap;
					padding-left: 40rpx;
					padding-right: 20rpx;
					box-sizing: border-box;

					.result-info-wrap {
						width: calc(100% - 152px);

						.info-item {
							display: flex;
							flex-wrap: nowrap;
							margin-bottom: 16rpx;

							.label {
								min-width: 50px;
								text-align: justify;
								text-align-last: justify
							}

							.value {
								width: 130px;
							}

							text {
								display: block;
								font-weight: 400;
								font-size: 28rpx;
								color: #34314F;
								line-height: 20px;
								text-align: left;
							}
						}
					}

					.result-img-wrap {
						padding-bottom: 28rpx;
					}

					.result-img {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 162px;
						height: 162px;
						background: url('https://hxs.dsjhs.com:553/prod-api/profile/wuxingbg.png') no-repeat center;
						background-size: 100% 100%;

						.wx-img {
							width: 146px;
							height: 146px;

						}

						.count {
							position: absolute;
							width: 60rpx;
							text-align: center;
							font-size: 20rpx;
							line-height: 28rpx;

							&.huo {
								top: 27px;
								color: #FF4D4F;
							}

							&.tu {
								top: 64px;
								right: 12px;
								color: #B86927;
							}

							&.jin {
								bottom: 17px;
								right: 30px;
								color: #E79320;
							}

							&.shui {
								bottom: 17px;
								left: 30px;
								color: #3F87F3;
							}

							&.mu {
								top: 64px;
								left: 12px;
								color: #13C73D;
							}
						}
					}
				}
			}

			.card-item {
				width: 100%;
				// height: 194px;
				padding: 36rpx 40rpx;
				margin-top: 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 20px;

				.card-content {
					font-weight: 400;
					font-size: 28rpx;
					color: #34314F;
					line-height: 50rpx;
					text-align: left;
				}
			}
		}

		.result-footer {
			width: 100%;
			padding: 0 32rpx 48rpx 32rpx;
			margin-top: 48rpx;
			box-sizing: border-box;

			.result-btns {
				display: flex;
				flex-wrap: nowrap;
				margin-bottom: 24rpx;

				button {
					width: calc(50% - 10px);
					height: 96rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;
					border-radius: 20px;
					background-color: #fff;

					&::after {
						border: 0;
					}
				}

				.share-btn {
					background: #FFDE6D;
				}
			}

			.footer-tip {
				font-weight: 400;
				font-size: 26rpx;
				color: #A694EA;
				line-height: 28px;
				text-align: center;
			}
		}

		.common-head {
			display: flex;
			margin-bottom: 24rpx;

			.common-icon {
				width: 26px;
				height: 26px;

				&.shenqiang {
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/shenxing.png') no-repeat center;
					background-size: 100% 100%;
				}

				&.rizhu {
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/lunming.png') no-repeat center;
					background-size: 100% 100%;
				}

				&.caiyun {
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/caiyun.png') no-repeat center;
					background-size: 100% 100%;
				}

				&.yinyuan {
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/yinyuan.png') no-repeat center;
					background-size: 100% 100%;
				}

				&.yuncheng {
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/caiyun2.png') no-repeat center;
					background-size: 100% 100%;
				}
			}

			.common-title {
				margin-left: 20rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #34314F;
				line-height: 25px;
			}
		}

		.resolve-btn {
			width: 170rpx;
			height: 56rpx;
			margin-top: 24rpx;
			border-radius: 32rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #34314F;
			line-height: 56rpx;
			text-align: center;
			font-style: normal;
			box-sizing: border-box;
			border: 1px solid rgba(52, 49, 79, 0.2);
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>